<template>
  <div class="login-box">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
      <p>考试考试考试</p>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" type="username" autocomplete="off" placeholder="Username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="Password" />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-space>
          <el-input v-model="ruleForm.captcha" placeholder="验证码" />
          <div @click="changeCode">
            <img :src="codeImg">
          </div>
        </el-space>
      </el-form-item>
      <el-form-item>
        <div class="el-form-item__content">
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
// 导入code 接口
import { codeApi } from '../../api/code'
// 导入 login 接口
import { loginApi } from '../../api/login'
import { useRouter } from 'vue-router'
// import { mapMutations } from 'vuex'
const ruleFormRef = ref()
// const store = mapMutations()
// console.log('store',store);
// 验证码
const codeImg = ref('')
const key = ref('')
const router = useRouter()
// 账号验证
const validatePass = (rule, value, callback) => {
  // 用户名验证 4到16位(数字，字母，下划线，减号)
  if (/^[\w-]{4,16}$/.test(value)) {
    // 验证通过
    callback()
  } else {
    callback(new Error('账号有误'))
  }
}
// 密码验证 
const validatePass2 = (rule, value, callback) => {
  if (/^\d+$/.test(value)) {
    callback()
  } else {
    callback(new Error('密码太简单了'))
  }
}
// 验证码验证
const validatePass3 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('验证码错误'))
  // } else if (value !== ruleForm.key) {
  //   callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}
const rules = reactive({
  username: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass2, trigger: 'blur' }],
  captcha: [{ validator:validatePass3, trigger: 'blur' }],
})
const ruleForm = reactive({
  username: 'Yuannn',
  password: '123456',
  key: '',
  captcha: ''
})
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // console.log(ruleForm)
      ruleForm.key = key.value
      // console.log(key.value);
      // console.log(ruleForm);
      // 调用登录接口
      loginApi(ruleForm).then(res=>{
        // console.log('login',res);
        if(res.data.errNo == 0){
          // 存到 localStorage
          localStorage.setItem('token',res.data.context.jwt)
          localStorage.setItem('acl',JSON.stringify(res.data.context.acl))
          // 存本地
          // store(res.data)
          // 登录成功后 跳转到首页
          router.push('/Dashboard')
          ElMessage({
          message:res.statusText,
          type:'success',
  })
        }
})
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 调用验证码接口请求数据
codeApi().then(res=>{
  console.log('res',res);
  codeImg.value = res.data.img
  key.value = res.data.key
  // console.log(key.value);
})
// 实现点击就能切换验证码
const changeCode = ()=>{
  codeApi().then(res=>{
  codeImg.value = res.data.img
  key.value = res.data.key
})
}

</script>
  
<style scoped lang="scss">
.login-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../../assets/imgs/1.png');
  background-size: 100% 100%;
  overflow: hidden;
}

.demo-ruleForm {
  p {
    font-family: '楷体';
    font-size: 1.4375rem;
    font-weight: 500;
    text-align: center;
    color: #fff;
  }

  // width: 21.875rem;
  // height: 21.875rem;
  // background-color:rgba(255,255,255,0.4);
  border: .0625rem solid #ededed;
  padding: 2.1875rem 2.1875rem .9375rem 2.1875rem;
  margin: 5rem auto;
  border-radius: .3125rem;
  box-shadow: 0 0 1.5625rem #909399 // opacity: 1;

}

.el-form-item__content {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
}
</style>